<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getUserProfile } from '@/api/system/user'
import { getAttendanceApplyApi } from '@/api/attendance'
import { ref } from 'vue'

const frequency = ref(0)
const profile = ref(null)
const bukaFn = () => {
  if (frequency.value < 4) {
    uni.navigateTo({
      url: '/pages/audit/attendance/replacementCard',
    })
  } else {
    uni.showToast({
      title: '您本月的补卡次数上限！',
      icon: 'none',
    })
  }
}
const qinjiaFn = () => {
  uni.navigateTo({
    url: '/pages/audit/attendance/leave',
  })
}
const jiabanFn = () => {
  uni.navigateTo({
    url: '/pages/audit/attendance/WorkOvertime',
  })
}
const waichuFn = () => {
  uni.navigateTo({
    url: '/pages/audit/attendance/GoingOut',
  })
}
const chuchaiFn = () => {
  uni.navigateTo({
    url: '/pages/audit/attendance/BusinessTrip',
  })
}
const jiluFn = () => {
  uni.navigateTo({
    url: '/pages/audit/index?id=' + 1,
  })
}

const getUserInfo = async () => {
  profile.value = (await getUserProfile()).data
}
const getAttendanceApplyApiFn = async (userId) => {
  let params = {
    userId: userId,
  }
  let { code, data } = await getAttendanceApplyApi(params)
  if (code === 200) {
    frequency.value = data
  }
}
onLoad(async () => {
  await getUserInfo()
  await getAttendanceApplyApiFn(profile.value.userId)
})
</script>

<template>
  <view class="container">
    <view class="sectionClass">
      <uni-section title="补卡" title-font-size="32rpx" @tap="bukaFn">
        <template v-slot:decoration>
          <view
            style="
              display: flex;
              align-self: center;
              justify-content: center;
              margin-right: 24rpx;
              width: 80rpx;
              height: 80rpx;
            "
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f6f1fe;
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
              "
            >
              <image src="@/static/icon/time.svg" style="width: 40rpx; height: 40rpx"></image>
            </view>
          </view>
        </template>
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
      <uni-section title="请假" title-font-size="32rpx" @tap="qinjiaFn">
        <template v-slot:decoration>
          <view
            style="
              display: flex;
              align-self: center;
              justify-content: center;
              margin-right: 24rpx;
              width: 80rpx;
              height: 80rpx;
            "
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fef1f1;
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
              "
            >
              <image src="@/static/icon/calendar.svg" style="width: 40rpx; height: 40rpx"></image>
            </view>
          </view>
        </template>
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
      <uni-section title="加班" title-font-size="32rpx" @tap="jiabanFn">
        <template v-slot:decoration>
          <view
            style="
              display: flex;
              align-self: center;
              justify-content: center;
              margin-right: 24rpx;
              width: 80rpx;
              height: 80rpx;
            "
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ecf9fe;
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
              "
            >
              <image src="@/static/icon/computer.svg" style="width: 40rpx; height: 40rpx"></image>
            </view>
          </view>
        </template>
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
<!--      <uni-section title="外出" title-font-size="32rpx" @tap="waichuFn">
        <template v-slot:decoration>
          <view
            style="
              display: flex;
              align-self: center;
              justify-content: center;
              margin-right: 24rpx;
              width: 80rpx;
              height: 80rpx;
            "
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fceefc;
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
              "
            >
              <image src="@/static/icon/door.svg" style="width: 40rpx; height: 40rpx"></image>
            </view>
          </view>
        </template>
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section> -->
      <uni-section title="出差" title-font-size="32rpx" @tap="chuchaiFn">
        <template v-slot:decoration>
          <view
            style="
              display: flex;
              align-self: center;
              justify-content: center;
              margin-right: 24rpx;
              width: 80rpx;
              height: 80rpx;
            "
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f0fbef;
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
              "
            >
              <image src="@/static/icon/suitcase.svg" style="width: 40rpx; height: 40rpx"></image>
            </view>
          </view>
        </template>
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
    </view>
    <view class="sectionClass">
      <uni-section title="申请记录" title-font-size="32rpx" @tap="jiluFn">
        <template v-slot:decoration>
          <view
            style="
              display: flex;
              align-self: center;
              justify-content: center;
              margin-right: 24rpx;
              width: 80rpx;
              height: 80rpx;
            "
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f0f4ff;
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
              "
            >
              <image src="@/static/icon/detailList.svg" style="width: 40rpx; height: 40rpx"></image>
            </view>
          </view>
        </template>
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.container {
  margin: 40rpx 32rpx 0rpx 32rpx;
}

.sectionClass {
  border-radius: 16rpx;
  margin-top: 32rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx 0 #0000000d;
}

.textClass {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}
</style>
